<template>
  <div class="personalCenter-container">
    <div class="title">个人中心</div>
    <el-row style="margin-top: 50px; display: flex; align-items: center">
      <el-col :span="24">
        <div class="info_box">
          <div style="display: flex; flex-direction: column; align-items: center">
            <el-image
              :src="info.avatar ? $baseUrl + info.avatar : 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'"
              style="border-radius: 50%; width: 150px; height: 150px; margin-right: 50px"
              :preview-src-list="[
                info.avatar ? $baseUrl + info.avatar : 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
              ]"
            ></el-image>
            <span class="info_title" style="padding-top: 30px">头像</span>
          </div>
          <div style="flex: 1">
            <el-col style="display: flex">
              <el-row :span="8" class="row-item">
                <span class="info_title">用户名：</span>
                <span class="info_val">{{ info.user_name }}</span>
              </el-row>
              <el-row :span="8" class="row-item">
                <span class="info_title">手机号：</span>
                <span class="info_val">{{ info.phone }}</span>
              </el-row>
              <el-row :span="8" class="row-item">
                <span class="info_title">角色：</span>
                <span class="info_val">{{ info.introduction }}</span>
              </el-row>
            </el-col>
            <el-col style="display: flex">
              <el-row :span="8" class="row-item">
                <span class="info_title">注册时间：</span>
                <span class="info_val">{{ info.create_time }}</span>
              </el-row>
            </el-col>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="btn_box">
      <el-button type="primary" @click="editInfo" icon="el-icon-edit">修改账户信息</el-button>
      <el-button type="primary" @click="editPwd" plain icon="el-icon-lock">修改密码</el-button>
    </div>
    <edit ref="edit" @getInfo="getInfo" v-if="show.edit" @close="show.edit = false"></edit>
    <editPwd ref="editPwd" @getInfo="getInfo" v-if="show.editpwd" @close="show.editpwd = false"></editPwd>
  </div>
</template>

<script>
  import edit from './components/edit.vue'
  import editPwd from './components/editPwd.vue'
  import { getUserInfo } from '@/api/user'
  export default {
    name: 'PersonalCenter',
    components: { edit, editPwd },
    data() {
      return {
        tabPosition: 'left',
        info: {},
        show: {
          edit: false,
          editpwd: false,
        },
      }
    },
    mounted() {
      this.getInfo()
    },
    methods: {
      async getInfo() {
        await getUserInfo(localStorage.getItem('mall-admin-token')).then(({ data }) => {
          console.log('data: ', data)
          this.info = data
          this.$store.commit('user/setAvatar', data.avatar)
          this.$store.commit('user/setUsername', data.user_name)
          this.$store.commit('user/setPermissions', data.permissions)
        })
      },
      editInfo() {
        this.show.edit = true
        this.$nextTick(() => {
          this.$refs.edit.open(this.info)
        })
      },
      editPwd() {
        this.show.editpwd = true
        this.$nextTick(() => {
          this.$refs.editPwd.open(this.info)
        })
      },
    },
  }
</script>
<style scoped lang="scss">
  .personalCenter-container {
    min-height: 350px !important;

    .title {
      font-size: 18px;
      color: #303133;
      padding: 10px 0;
    }
    .info_box {
      padding: 10px;
      display: flex;
      .info_title {
        width: 50px;
        font-size: 14px;
        font-family: PingFang HK;
        font-weight: 400;
        color: #999999;
        margin-right: 28px;
      }
      .info_val {
        font-size: 14px;
        font-family: PingFang HK;
        font-weight: 400;
        color: #333333;
      }
      .row-item {
        width: calc(100% / 3);
        padding: 20px 0;
      }
    }
    .btn_box {
      display: flex;
      justify-content: center;
      margin: 20px 0;
    }
  }
</style>
